<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.wrap {
				width: 1050px;
				/* height: 700px; */
				margin: 30px auto;
				box-shadow: 0px 0px 8px rgb(0,0,0,.2);
				border-radius: 5px;
				/* background-color: #eee; */
			}

			.module {
				text-align: center;
				margin: 0 auto;
				width: 1000px;
				/* background-color: cadetblue; */
			}

			h1 {
				color: #333;
				font-size: 32px;
			}

			h5 {
				color: #999;
				font-size: 16px;
				margin-top: 10px;
			}

			/* 左侧导航栏开始 */
			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.module .nav {
				
			}

			.nav {
				width: 100%;
				height: 35px;
				margin-top: 20px;
				position: relative;
				display: flex;
			}
			.nav .left-nav{
				margin-left: -5px;
			}
			
			.nav .left-nav ul li {
				float: left;
				margin: 0px 5px;
				
			}

			.nav .left-nav ul li a {
				width: 70px;
				height: 35px;
				display: block;
				line-height: 35px;
				/* padding: 0px 5px; */
				/* text-decoration: none; */
				color: #000;
				text-align: center;
				background-color: white;
				font-size: 14px;
				border-radius: 3px;
			}

			.nav .left-nav ul li a:hover {
				background: #e1e1e1;
			}

			.nav .left-nav ul li a#current {
				background: #0081E6;
				font-weight: bold;
				color: #fff;
			}

			/* 左侧导航栏结束 */

			/* 导航栏右侧开始 */
			.nav .right-nav {
				position: absolute;
				right: 0px;
				margin-top: 6px;
				border: 1px solid #E1E1E1;
				border-radius: 3px;
			}

			.nav .right-nav ul li {
				float: left;
				margin: 0 auto;
				
			}

			.nav .right-nav ul li a {
				background-color: #E1E1E1;
				display: block;
				width: 50px;
				height: 25px;
				line-height: 25px;
				/* border-right: 2px solid #000000; */
				border-radius: 3px;
				color: #666;				
			}
			
			/* .nav .right-nav ul li a#bgcolor {
				background-color: #E1E1E1;
				
			} */
			.nav .right-nav a#tuijian{
				background-color: #f5f5f5;
				border-right: 2px solid #000000;
			} 
			/* 导航栏右侧结束 */
			
			/* 课程列表开始 */
			.classlist{
				width: 100%;
				margin-top: 30px;
			}
			.box {
				display: -webkit-flex;
				display: flex;
				width: 1000px;
				height: 200px;
				/* margin: 0; */
				/* padding: 10px 0; */
				margin-top: 20px;
				border-radius: 3px;
				list-style: none;
				/* position: relative; */
				/* background-color: #eee; */
			}
			
			/* .box li {
				width: 230px;
				height: 200px;
				margin: 5px;
				padding: 10px;
				border-radius: 5px;
				background: #aaa;
				text-align: center;
			} */
			.box li{
				box-shadow: 0px 0px 8px rgb(0,0,0,.2);
				/* box-shadow: -2px 2px 2px rgb(0,0,0,.2); */
				border-radius: 5px;
			}
			.box li .img1{				
				width: 230px;
				height: 140px;				
				border-top-left-radius: 5px;	
				border-top-right-radius: 5px;
			}
			
			
			#box4 {
				-webkit-justify-content: space-between;
				justify-content: space-between;
			}
			p{
				color: #000000;
				text-indent: -140px;
			}
			.com{
				width: 100%;
				margin-top: 10px;
				/* background-color: #666666; */
				position: relative;
			}
			.com img{
				position: absolute;
				left: 8px;
			}
			.com span{
				position: absolute;
				left: 30px;
				font-size: 12px;
				color: #999999;
			}
			.com .money{
				position: absolute;
				right: 8px;
				font-size: 14px;
				color: red;
				display: inline;
			}
			/* 课程列表结束 */
			
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="module">
				<div class="maintitle">
					<h1>精品课程</h1>
				</div>
				<div class="futitle">
					<h5>精选网校课程，满足你的学习兴趣。</h5>
				</div>
					<div class="nav">
						<div class="left-nav">
							<ul>
								<li><a id="current" href="#">全部课程</a></li>
								<li><a href="#">默认分类</a></li>
								<li><a href="#">体验课</a></li>
								<li><a href="#">实训课</a></li>
								<li><a href="#">培训课</a></li>
							</ul>
						</div>
						<div class="right-nav">
							<ul>
								<li><a href="#">最新</a></li>
								<li><a href="#" id="tuijian">最热</a></li>
								<li><a href="#" id="tuijian">推荐</a></li>
							</ul>
						</div>
					</div>
					
					
					<div class="classlist">
						<ul id="box4" class="box">
								<li>
									<a href="#">
										<img class="img1" src="img/ps.png">
										<p>PS 基础课程</p>
										<div class="com">
											<img src="img/comment.png" />
											<span>0</span>
											<div class="money">699元</div>
										</div>
									</a>
								</li>
								<li>
									<li>
										<a href="#">
											<img class="img1" src="img/es.png">
											<p>EcmaScript</p>
											<div class="com">
												<img src="img/comment.png" />
												<span>0</span>
												<div class="money">699元</div>
											</div>
										</a>
									</li>
								</li>
								<li>
									<li>
										<a href="#">
											<img class="img1" src="img/css.png">
											<p>EcmaScript</p>
											<div class="com">
												<img src="img/comment.png" />
												<span>0</span>
												<div class="money">699元</div>
											</div>
										</a>
									</li>
								</li>
								<li>
									<li>
										<a href="#">
											<img class="img1" src="img/ps.png">
											<p>EcmaScript</p>
											<div class="com">
												<img src="img/comment.png" />
												<span>0</span>
												<div class="money">699元</div>
											</div>
										</a>
									</li>
								</li>
							</ul>
						
						
						<ul id="box4" class="box">
							<li>
								<a href="#">
									<img class="img1" src="img/ps.png">
									<p>PS 基础课程</p>
									<div class="com">
										<img src="img/comment.png" />
										<span>0</span>
										<div class="money">699元</div>
									</div>
								</a>
							</li>
							<li>
								<li>
									<a href="#">
										<img class="img1" src="img/ps.png">
										<p>EcmaScript</p>
										<div class="com">
											<img src="img/comment.png" />
											<span>0</span>
											<div class="money">699元</div>
										</div>
									</a>
								</li>
							</li>
							<li>
								<li>
									<a href="#">
										<img class="img1" src="img/ps.png">
										<p>EcmaScript</p>
										<div class="com">
											<img src="img/comment.png" />
											<span>0</span>
											<div class="money">699元</div>
										</div>
									</a>
								</li>
							</li>
							<li>
								<li>
									<a href="#">
										<img class="img1" src="img/ps.png">
										<p>EcmaScript</p>
										<div class="com">
											<img src="img/comment.png" />
											<span>0</span>
											<div class="money">699元</div>
										</div>
									</a>
								</li>
							</li>
						</ul>
						
						<ul id="box4" class="box">
							<li>
								<a href="#">
									<img class="img1" src="img/ps.png">
									<p>PS 基础课程</p>
									<div class="com">
										<img src="img/comment.png" />
										<span>0</span>
										<div class="money">699元</div>
									</div>
								</a>
							</li>
							<li>
								<li>
									<a href="#">
										<img class="img1" src="img/ps.png">
										<p>EcmaScript</p>
										<div class="com">
											<img src="img/comment.png" />
											<span>0</span>
											<div class="money">699元</div>
										</div>
									</a>
								</li>
							</li>
							<li>
								<li>
									<a href="#">
										<img class="img1" src="img/ps.png">
										<p>EcmaScript</p>
										<div class="com">
											<img src="img/comment.png" />
											<span>0</span>
											<div class="money">699元</div>
										</div>
									</a>
								</li>
							</li>
							<li>
								<li>
									<a href="#">
										<img class="img1" src="img/ps.png">
										<p>EcmaScript</p>
										<div class="com">
											<img src="img/comment.png" />
											<span>0</span>
											<div class="money">699元</div>
										</div>
									</a>
								</li>
							</li>
						</ul>
					</div>
			</div>
		</div>
	</body>
</html>
